import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import { Drawer, Form, Button, Col, Row, Input, Select, DatePicker, Icon, message, Radio, Tabs, Collapse, } from 'antd';
import styles from './typeNode.less';
import Editor from '@/utils/Editor';
const TabPane = Tabs.TabPane;
const { TextArea } = Input;
const { Panel } = Collapse;
const { Option } = Select;
class AnswerSlot extends React.Component {

    toAddSlotForSelect(value, index, slotIndex, _id, newName, funName) {
        let data = { value, index, slotIndex, _id, newName, funName }
        this.props.toAddSlotForSelect(data);
    }
    toEditSlotByUnSelect(value, index) {
        let data = { value, index }
        this.props.toEditSlotByUnSelect(data);
    }
    toOnEditQa(index, type) {
        let data = { index, type }
        this.props.toOnEditQa(data)
    }
    render() {
        const { slotDetailArr, answer, index } = this.props
        return (
            <Row>
                <Col span={15}>
                    {slotDetailArr.map((slotDetailItem, slotIndex) => {
                        return (
                            <Row style={{ marginTop: 10 }} key={slotIndex}>
                                {slotDetailItem.isEnum ? (
                                    <div>
                                        <Col span={4} style={{ textAlign: 'right' }}>
                                            {slotDetailItem.name}:
                                        </Col>
                                        <Col span={18} offset={1}>
                                            {answer.slotValues.length > 0 ? (
                                                <Select
                                                    mode="multiple"
                                                    style={{ width: '100%' }}
                                                    placeholder="请选择词槽"
                                                    onBlur={value =>
                                                        this.toAddSlotForSelect(
                                                            value,
                                                            index,
                                                            slotIndex,
                                                            slotDetailItem.id,
                                                            slotDetailItem.name
                                                        )
                                                    }
                                                    onDeselect={value =>
                                                        this.toEditSlotByUnSelect(
                                                            value,
                                                            index,
                                                            slotIndex,
                                                            slotDetailItem.id,
                                                            slotDetailItem.name
                                                        )
                                                    }
                                                    defaultValue={slotDetailItem.values}
                                                    key={slotIndex}
                                                >
                                                    {slotDetailItem.items.map(function (
                                                        item,
                                                        itemIndex
                                                    ) {
                                                        return (
                                                            <Option key={item.word}>{item.word}</Option>
                                                        );
                                                    })}
                                                </Select>
                                            ) : (
                                                <Select
                                                    mode="multiple"
                                                    style={{ width: '100%' }}
                                                    placeholder="请选择词槽"
                                                    onDeselect={value =>
                                                        this.toEditSlotByUnSelect(
                                                            value,
                                                            index,
                                                            slotIndex,
                                                            slotDetailItem.id,
                                                            slotDetailItem.name
                                                        )
                                                    }
                                                    onBlur={value =>
                                                        this.toAddSlotForSelect(
                                                            value,
                                                            index,
                                                            slotIndex,
                                                            slotDetailItem.id,
                                                            slotDetailItem.name
                                                        )
                                                    }
                                                    key={slotIndex}
                                                >
                                                    {slotDetailItem.items.map(function (item, itemIndex) {
                                                        return (
                                                            <Option key={item.word}>{item.word}</Option>
                                                        );
                                                    })}
                                                </Select>
                                            )}
                                        </Col>
                                    </div>
                                ) : (
                                    <div>
                                        <Col span={4} style={{ textAlign: 'right' }}>
                                            {slotDetailItem.name}:
                                        </Col>
                                        <Col span={18} offset={1}>
                                            <span style={{ color: 'lightgrey' }}>
                                                {' '}
                                                词槽值不可枚举，不支持设置条件
                                            </span>
                                        </Col>
                                    </div>
                                )}
                            </Row>
                        );
                    })}
                </Col>
                <Col span={6} >
                    <Button
                        htmlType="button"
                        style={{ marginLeft: 10 }}
                        onClick={() => this.toOnEditQa(index, 'cancel')}
                    >
                        取消
                    </Button>
                    <Button
                        htmlType="button"
                        style={{ marginLeft: 10 }}
                        onClick={() => this.toOnEditQa(index, 'save')}
                    >
                        保存
                    </Button>
                </Col>
            </Row>
        )
    }
}
export default AnswerSlot